<mat-card class="example-card">
  <mat-card-content>
    <h2 class="example-h2">Progress bar configuration</h2>

    <section class="example-section">
      <label class="example-margin">Mode:</label>
      <mat-radio-group [(ngModel)]="mode">
        <mat-radio-button class="example-margin" value="determinate">
          Determinate
        </mat-radio-button>
        <mat-radio-button class="example-margin" value="indeterminate">
          Indeterminate
        </mat-radio-button>
        <mat-radio-button class="example-margin" value="buffer">
          Buffer
        </mat-radio-button>
        <mat-radio-button class="example-margin" value="query">
          Query
        </mat-radio-button>
      </mat-radio-group>
    </section>

    @if (mode === 'determinate' || mode === 'buffer') {
      <section class="example-section">
        <label class="example-margin">Progress:</label>
        <mat-slider class="example-margin">
          <input type="range" [(ngModel)]="value" matSliderThumb>
        </mat-slider>
      </section>
    }
    @if (mode === 'buffer') {
      <section class="example-section">
        <label class="example-margin">Buffer:</label>
        <mat-slider class="example-margin">
          <input type="range" [(ngModel)]="bufferValue" matSliderThumb>
        </mat-slider>
      </section>
    }
  </mat-card-content>
</mat-card>

<mat-card class="example-card">
  <mat-card-content>
    <h2 class="example-h2">Result</h2>

    <section class="example-section">
      <mat-progress-bar
          class="example-margin"
          [mode]="mode"
          [value]="value"
          [bufferValue]="bufferValue">
      </mat-progress-bar>
    </section>
  </mat-card-content>
</mat-card>
